<template>
  <div class="widget-item-container drag-widget" style="cursor: move;">
    <a-form-item
    class="widget-view"
      v-if="element"
      :key="element.key"
      :class="{ active: selectWidget?.key === element.key }"
      :rules="element.options.rules"
      :label="element.label"
      :show-label="element.options.showLabel"
    >
    <template v-if="element.type === 'input'">
      <a-input  v-model:value="element.options.defaultValue" />
    </template>
      
    </a-form-item>
    <div class="widget-view-action" v-if="selectWidget?.key === element.key">
      <CopyOutlined  @click.stop="$emit('copy')"/>
      <DeleteOutlined @click.stop="$emit('delete')" />
    </div>

    <div class="widget-view-drag" v-if="selectWidget?.key === element.key">
      <SvgIcon iconClass="move" className="drag-widget" />
    </div>
  </div>
</template>

<script>
import {
  CopyOutlined,
  DeleteOutlined
} from '@ant-design/icons-vue';
import {inject} from "vue"
export default {
  components:{
    CopyOutlined,
    DeleteOutlined
  },
  props: {
    config: {
      type: Object,
      required: true
    },
    element: {
      type: Object,
      required: true
    },
    selectWidget: {
      type: Object
    },
    widgetForm: {
      type: Object
    },
  },
  emits: ['copy', 'delete'],
  data(){
    return {
    }
  },
  setup () {
    return {}
  }
}
</script>

<style lang="less" scoped>

</style>